<template>
  <div class="" id="Pie"></div>
</template>

<script lang="ts" setup>
  import api from '../api'
  import ec from '@/utils/chart'
  const { drawChart } = ec()
  const store = useStore()
  const { proxy } = getCurrentInstance()
  let exposeRef = $ref()
  let data = $ref([])

  // 初始化
  onMounted(async() => {
    await init()
  })

  // 监控
  watch(()=>data, async(val) => {
    await nextTick()
    setChart()
  }, {immediate: false, deep: true})

  // 请求
  const init = async() => {
    data = [
      {name: '类1', value: '10'},
      {name: '类2', value: '20'},
      {name: '类3', value: '30'},
      {name: '类4', value: '40'},
    ]
  }

  // 绘制
  const setChart = async() => {
    drawChart('Pie','Pie', '', data)
  }
</script>
  
<style scoped lang="scss">

</style>
  